// 入口文件
// console.log('ok')
/* eslint no-new:off */

import Vue from 'vue'
import app from './app.vue'
// import { Header, Swipe, SwipeItem, Button, Lazyload } from 'mint-ui'
import mint from 'mint-ui'
import 'mint-ui/lib/style.css'
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'
import './lib/mui/fonts/mui-icons-extra.ttf'
import Router from 'vue-router'
// 导入自己的router.js路由模块
import router from './router'
// 导入 vue-resource
import VueRource from 'vue-resource'
import moment from 'moment'
// 图片预览插件
import VuePreview from 'vue-preview'
import Vuex from 'vuex'
Vue.use(VuePreview)

Vue.use(VueRource)
Vue.use(Router)
Vue.use(mint)
Vue.use(Vuex)
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe)
// Vue.component(SwipeItem.name, SwipeItem)
// Vue.component(Button.name, Button)
// Vue.use(Lazyload)

// Vue.http.options.root = 'http://jsyyapi.libokeji.cn'
// 设置全局post表单数据格式的组织形式
Vue.http.options.emulateJSON = true
// 每次刚进入网站 肯定会调用 main.js 在刚调用的时候 先从本地存储中把购物车的数据读出来 放到store
var car = JSON.parse(localStorage.getItem('car') || '[]')
var store = new Vuex.Store({
  state: {
    // 可以吧state想象成组件中的data 专门用来存储数据的
    // 如果在组件中想要访问 store中的数据 只能通过this.$store.state.*** 来访问
    car: car// 将购物车中的商品数据 用一个数组存储起来,在car数组中 存储一些商品的对象 可以暂时将这个商品对象 设计成：{ id:商品的id, count:要购买的数量, price:商品的单价, selected:boolean }
  },
  mutations: {
    // 注意 如果要操作store中的state值 只能通过调用mutations提供的方法 才能操作对应的数据，不推荐直接操作 state的数据 因为 万一导致了数据紊乱 不能快速定位到错误的原因 因为 每个组件都可能有操作数据的方法
    // increment (state) {}
    // 注意 如果组件想要调用mutations中的方法 只能使用this.$store.commit('方法名')
    // 这种调用mutations方法的格式 和 this.$emit('父组件中方法名')
    // 注意mutations的函数参数列表中 最多支持两个参数 第一个参数 state状态，参数2：通过commit提交过来的参数
    addToCar (state, goodsinfo) {
      // 点击加入购物车 把商品信息 保存到 store中的 car上
      // 分析：
      // 1，如果购物车中之前就已经有这个对应的商品了 那么 只需要更新数量
      // 2，如果没有 则直接把商品数据 push到 car中即可
      var flag = false
      // // 假设 在购物车中 么有找到对应的商品
      state.car.some(item => {
        if (item.id == goodsinfo.id) {
          item.count += parseInt(goodsinfo.count)
          flag = true
          return true
        }
      })
      // 如果最终循环完毕 得到的flag还是false 则把商品数据 直接push到购物车中
      if (!flag) {
        state.car.push(goodsinfo)
      }
      // 当更新car之后 把car数组存储到本地的localstoreage中
      localStorage.setItem('car', JSON.stringify(state.car))
    }
  },
  getters: {
    // 注意这里的getters对外提供数据，不负责修改数据 如果想要修改state中的数据 请去找mutations
    // optCount: function (state) {
    //   return '当前最新的count值是' + state.count
    // }
    // 经过对比 发现getters中的方法 和 组件中的过滤器比较类似 因为过滤器和getters都没有修改原数据，都是把原数据做了一层包装，提供给了调用者
    // 其次，getters也和computed比较像 只要state中的数据发生变化了 那么 如果getters正好也引用了这个数据 那么就会立即出发getters的重新求值
    getAllCount (state) {
      var c = 0
      state.car.forEach(item => {
        c += item.count
      })
      return c
    }
  }
})
// 总结 ：
// state中的数据 只能直接修改 如果想要修改 必须通过 mutations
// 如果组件想要直接从state上获取数据 需要this.$store.state.***
// 如果组件想要修改数据 必须使用mutations提供的方法 需要通过this.$store.commit('方法名',唯一的参数)
// 如果store中的state上的数据 在对外提供的时候 需要做一层包装 那么 推荐使用getters，如果需要使用getters 则用this.$store.getters.***

// 定义全局的时间过滤器 这里要用到 cnpm i moment -s
Vue.filter('dataFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
  return moment(dataStr).format(pattern)
})
new Vue({
  el: '#app',
  render: h => h(app),
  router,
  store // 只要挂在在vm上 任何组件都可以使用store存取数据 就能全局访问所有数据
})
